<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div style="float: right; width: 27%">
          <a-space style="float: right; margin-right: 10px; margin-top: 15px; margin-bottom: 15px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space>
        </div>
      </div>
      <a-table
        style="margin-top: 0px"
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      />
      <div class="pagination" style="float: right">
        <a-pagination
          show-size-changer
          v-model:current="pageIndex"
          v-model:pageSize="pageSize"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { getxfsslist } from '/@/api/demo/hoursebase'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  //   import Detail from './component/detailDrawer.vue';
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  let userInfo = ref<any>(null);
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(50);
  let total = ref(0);
  let loading = ref(true);
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 80,
      },
      {
        title: '区名称',
        dataIndex: 'xzq',
        key: 'xzq',
        align: 'center',
        width: 80,
      },
      {
        title: '消防车通道数量',
        dataIndex: 'xfctdsl',
        key: 'xfctdsl',
        align: 'center',
        width: 150,
      },
      {
        title: '设置市政消火栓数量',
        dataIndex: 'sfszszxhs',
        key: 'sfszszxhs',
        align: 'center',
        width: 150,
      },
      {
        title: '按标准建设消防水池数量',
        dataIndex: 'abzjsxfscsl',
        key: 'abzjsxfscsl',
        align: 'center',
        width: 170,
      },
      {
        title: '配置消防水泵数量',
        dataIndex: 'pzxfsb',
        key: 'pzxfsb',
        align: 'center',
        width: 150,
      },
      {
        title: '建设室外消火栓数量',
        dataIndex: 'jsswxhs',
        key: 'jsswxhs',
        align: 'center',
        width: 150,
      },
      {
        title: '建设专职消防队或小型消防站数量',
        dataIndex: 'sfjszzxfdhxxxfz',
        key: 'sfjszzxfdhxxxfz',
        align: 'center',
        width: 220,
      },
      {
        title: '建设微型消防站',
        dataIndex: 'sfjswxxfz',
        key: 'sfjswxxfz',
        align: 'center',
        width: 120,
      },
      {
        title: '新增消防车通道数量',
        dataIndex: 'xfctdslxz',
        key: 'xfctdslxz',
        align: 'center',
        width: 150,
      },
    ],
    id: null,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  let { tableData } = toRefs(data);
	
  async function getData() {
    const { role } = userInfo.value;
    let groupname = '';
    if (role === 'City') {
      groupname = 'qxmc';
    } else if (role === 'Area') {
      groupname = 'jzmc';
    } else if (role === 'Street') {
      groupname = 'czmc';
    }
    let params: iParams = {
      groupname: groupname,
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
    };
    console.log('@res--工作进入汇总表', params);
    loading.value = true;
    let res = await getxfsslist(params);
   console.log('@res--工作进入汇总表', res.items);
    if (res || res.items.length > 0) {
      let xfctdsl = vtotal(res.items, 'xfctdsl');
      let sfszszxhs = vtotal(res.items, 'sfszszxhs');
      let abzjsxfscsl = vtotal(res.items, 'abzjsxfscsl');
      let index_count = res.items.length + 1;
      let pzxfsb = vtotal(res.items, 'pzxfsb');
      let jsswxhs = vtotal(res.items, 'jsswxhs');
      let sfjszzxfdhxxxfz = vtotal(res.items, 'sfjszzxfdhxxxfz');
      let sfjswxxfz = vtotal(res.items, 'sfjswxxfz');
      let xfctdslxz = vtotal(res.items, 'xfctdslxz');
      let allObj = {
        xzq: '汇总',
        xfctdsl: xfctdsl,
        sfszszxhs: sfszszxhs,
        abzjsxfscsl: abzjsxfscsl,
        index: index_count,
        pzxfsb: pzxfsb,
        jsswxhs: jsswxhs,
        sfjszzxfdhxxxfz: sfjszzxfdhxxxfz,
        sfjswxxfz: sfjswxxfz,
        xfctdslxz: xfctdslxz,
      };
      loading.value = false;
      data.tableData = [...res.items, allObj];
      total.value = res.total;
    }
  }
  function vtotal(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }

  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url: uriBase + '/static/xfss/cdfsExportExcel?access_token=' + tk,
      target: '_blank',
    });
  }

  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******数据初始化******');
    getData();
    getTableHeight();
    // getTableData();
  });
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }
  .root-house-mng-main {
    margin: 6px;
  }
  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td,
  .ant-table tfoot > tr > th,
  .ant-table tfoot > tr > td {
    padding: 12px 16px !important;
  }
</style>
